<script setup>
import { ref, onMounted, defineProps, computed } from 'vue'

const props = defineProps({
  texts: {
    type: Array,
    default: () => [],
  },
  size: {
    type: String,
    default: 'base',
  },
  animation: {
    type: Boolean,
    default: true,
  },
})

const typedText = ref('')
const textSize = ref('text-' + (props.size || 'base'))
const isCursorVisible = ref(true)
//随机从props.texts中随机取一个字符串
const text = computed(() => props.texts[Math.floor(Math.random() * props.texts.length)])

const type = () => {
  if (!props.animation) {
    typedText.value = text.value
    return
  }
  let index = 0
  const interval = setInterval(() => {
    if (index < text.value.length) {
      typedText.value += text.value.charAt(index)
      index++
    } else {
      isCursorVisible.value = false
      clearInterval(interval)
    }
  }, 100) // 控制打字速度
}

onMounted(type)
</script>

<template>
  <div class="text-gradient bg-clip-text font-bold inline-block" :class="textSize">
    {{ typedText }}
    <span class="cursor bg-pink-500 h-0.5 w-3 inline-block"></span>
  </div>
</template>

<style>
@keyframes blink {
  50% {
    opacity: 0;
  }
}
.cursor {
  animation: blink 1s infinite;
}
.text-gradient {
  background-image: linear-gradient(to right, #fc466b, #3f5efb);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
</style>
